Идеальная форма авторизации — как делать не нужно (ошибки и советы)

Недавно мы постили ряд полезных советов по созданию эффективных форм регистрации на сайте, а сегодня хотим поговорить про блок авторизации/логина. В последнее время в сети появляется достаточно много раздражающих и слишком «заумных» его реализаций. Хорошо, когда дизайнеры пытаются сделать необычные и красивые формы логина (см. нашу подборку), вписывая их в общую концепцию веб-проекта, однако совсем другое дело — когда они перебарщивают с функциональностью. Иногда доходит до того, что популярные менеджеры паролей (в Chrome или от 1Password) просто не срабатывают.

В статье увидите примеры форм авторизации с проблемами в юзабилити. Это хорошая пища для размышления веб-разработчикам, не особо понимающих как именно их аудитория использует инструмент входа в систему на сайте. Во второй части статьи покажем и расскажем как лучше всего реализовать данную задачу и создавать простые, связываемые, узнаваемые элементы, что понятны посетителям и отлично работают с разными «запоминателями» паролей. Текст является адаптацией этой заметки.

Чего не стоит делать

Вот несколько подходов, которые являются далеко не самыми идеальными и удобными решениями. Их лучше избегать.

Логины в модальных окнах

• Человеку приходится совершать дополнительные действия: нажать кнопку в меню, выбрать вариант с логином, заполнить форму. Вместо этого вы просто могли зайти на страницу логина вручную (по ссылке, из закладок) или добавить обработку действия непосредственно в шапке сайта.
• Кроме того, механизм срабатывания модального всплывающего окна создает дополнительные трудности для программ по типу 1Password — функция «Открыть и заполнить», позволяющая быстро внести свои учетные данные при посещении сайта, скорее всего, не будет работать.
• Невозможность напрямую перенаправить юзера на авторизацию. Это станет головной болью для специалистов службы поддержки клиентов, т.к. им придется выдать пользователю кучу инструкций, вместо того чтобы просто предоставить ссылку.

Не скрывайте поля

Изначально обязательное поле «Фамилия» на сайте Delta скрыто, вероятно, для того, чтобы разгрузить пользовательский интерфейс путем поэтапного раскрытия данных. Фишка в том, что когда в форме логина элемент, обязательный для заполнения, становится невидимым, у менеджеров паролей нет возможности предварительно его заполнить. Человеку нужно выйти из одного поля дабы получить доступ к другому «супер секретному», которое сразу появится. В итоге вы получаете еще один (лишний) шаг в своем алгоритме действий.

Кстати, на экране приветствия у MacOS строка введения пароля также невидима, вероятно, для того, чтобы «очистить» интерфейс (или это стимул входить в систему через TouchID). Однако в итоге подобная «чистота» приводит лишь к бОльшей путанице (особенно для новичков).

Осторожнее с «волшебными» ссылками (magic links)

Можно предположить, что все началось с сервиса Slack, но теперь уже многие вебсайты предоставляют пользователям «временный пароль», например, Notion. Нетрудно догадаться, в чем хитрость такого хода – волокита с регистрацией подразумевает, что люди должны запомнить два значения вместо одного и будут использовать линк «Забыли пароль», но:

• Этот подход неимоверно нудный. Посетителям веб-ресурса придется: ввести адрес электронной почты; открыть новую вкладку или включить программу дабы войти в почтовый ящик; найти сообщение от службы поддержки (не отвлекаясь на другие письма); открыть письмо и скопировать пароль, похожий на абракадабру; вернуться на веб-сайт, где ввести бредовый набор символов и, наконец-то, заполнить форму входа. Чёрт возьми!
• Особое раздражение вызывает несовместимость с менеджерами/запоминателями паролей, а ведь сегодня на них полагаютсяя многие. С появлением систем проектирования дизайна часто стали говорить о последовательном логичном подходе, однако речь идет о нем не только в пределах своей экосистемы, — продукт должен быть совместимой и со всей остальной глобальной паутиной.
• Данная опция вынуждает изучать новые принципы работы в интернете. В течение многих лет юзерам приходится снова и снова сталкиваться с разнообразными «придумками» и новаторством в web дизайне/разработке. Введение новшеств, безусловно, необходимо, однако при этом следует учитывать один немаловажный факт – люди, посещающие ваш сайт, уже имеют за плечами наработанный багаж знаний по использованию популярных интернет технологий и сервисов. Некоторые разработчики, любители не в меру поумничать, заставляют свою целевую аудиторию изучать нечто новое, что тормозит работу (как минимум, на первых порах). Зачем? Это ведь просто авторизация!

Не разбивайте процесс логин на несколько шагов

Реализация у сервиса Shopify разделена на три(!) отдельных экрана. Опять же, судя по всему, разработчики сайта стараются сразу не перегружать пользователей большим количеством информации. В некоторых случаях такой прием, действительно, рационален, например, в e-коммерции и дизайнах интернет-магазинов, где разделены логические шаги совершения заказа: формирование корзины, выбор способа доставки/адреса, ввод платежных данных и т.д. Но согласитесь, решение простой тривиальной задачи в три этапа – это уже перебор. Недостатки метода:

• Ненужные доп.шаги при входе в систему. Вам приходится просматривать три экрана вместо одного. Это, без сомнения, замедляет работу.
• Не поддерживает менеджеры паролей. У программ/приложений есть возможность заполнить поля только на одной странице.

Что рекомендуется делать

Если говорить об эффективных подходах, то на самом деле, нет ничего прекрасней «скучной» и узнаваемой классической формы авторизации. Например, как у Harvest:

Еще один пример – система WordPress:

Понятный, лаконичный, узнаваемый интерфейс, который корректно работает и с 1Password, и со встроенными функциями Chrome.

Что касается рекомендаций. Они, по сути, заключаются в том, что вам следует избегать проблемных решений, озвученных выше, а именно:

• Создавайте специальную страницу логина. В этом случае работники тех.поддержки смогут направлять людей на URL-адрес страницы (domain.com/login), избавит их от необходимости давать кучу инструкций. У менеджеров паролей появится возможность сохранить URL-адрес, и в случае необходимости открыть его одним нажатием кнопки, предварительно заполнив все данные. Если делаете форму как элемент сайта на каждой вебстранице, то размещайте ее в максимально видном месте.
• Не скрывайте обязательные для заполнения поля. Когда для входа требуется ввести фамилию/возраст и т.п., сделайте эту строку видимой изначально.
• Размещайте все поля на одной странице. Быстрый процесс авторизации не должен превращаться в нудное перелистывание нескольких экранов.
• Не переусердствуйте. Возможно, во всех этих «волшебных» ссылках и прочих изобретательных решениях, действительно, что-то есть. Но при этом важно учитывать, как интернет-аудитория (и в частности ваша ЦА) привыкла использовать тот или иной инструмент. Скорей всего, разумнее положиться на скучный, узнаваемый, устоявшийся подход.

Разумеется, этот список негативных решений и пожеланий нельзя назвать исчерпывающим. Здесь не были затронуты многие другие фишки для форм входа, например, авторизация в форме с помощью социальных сетей (social login) или двухфакторная  аутентификация. Возможно, расскажем об этом в будущем. А пока пишите свои дополнения/мысли по этой теме в комментариях.